<script setup>
import { ref } from 'vue'
import PageIntroduce from '@/components/PageIntroduce.vue'

// const topImages = ref([
//   new URL('@/assets/brand/img.png', import.meta.url).href,
//   new URL('@/assets/brand/img_1.png', import.meta.url).href,
//   new URL('@/assets/brand/img_2.png', import.meta.url).href
// ])
// const underImages = ref([
//   new URL('@/assets/brand/img_2.png', import.meta.url).href,
//   new URL('@/assets/brand/img_1.png', import.meta.url).href,
//   new URL('@/assets/brand/img.png', import.meta.url).href
// ])
const images = ref([
  new URL('@/assets/brand/img.png', import.meta.url).href,
  new URL('@/assets/brand/img_1.png', import.meta.url).href
])
const brandImage = ref([
  new URL('@/assets/brand/img_1.png', import.meta.url).href,
  new URL('@/assets/brand/img_1.png', import.meta.url).href,
  new URL('@/assets/brand/img_1.png', import.meta.url).href
])
const title = '专业调配，热情服务，您的满意是我们最大的追求。'
</script>
<template>
  <div class="container">
    <div class="banner"></div>
    <PageIntroduce :title="title"></PageIntroduce>
    <!--    <div class="img-group">-->
    <!--      <div class="top">-->
    <!--        <img v-for="img in topImages" :key="img" :src="img" alt="" />-->
    <!--      </div>-->
    <!--      <div class="under">-->
    <!--        <img v-for="img in underImages" :key="img" :src="img" alt="" />-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="img-group">
      <img v-for="img in images" :key="img" :src="img" alt="" />-->
    </div>
<!--    <div class="text-group">-->
<!--      <span>干净的环境</span>-->
<!--      <span>热情的服务</span>-->
<!--      <span>热情的服务</span>-->
<!--    </div>-->
    <div class="title">
      <div class="small-check"></div>
      <span>品牌理念</span>
    </div>
    <div class="brand-concept">
      <p>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </p>
    </div>
    <div class="brand-image">
      <img v-for="img in brandImage" :key="img" :src="img" alt="" />
    </div>
    <div class="title">
      <div class="small-check"></div>
      <span>经营理念</span>
    </div>
    <div class="management-concept">
      <div class="text">
        <p>
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          XXXXXXXXXXXX
        </p>
      </div>
      <div class="management-img">
        <img src="@/assets/brand/img_4.png" alt="" />
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background: #fcffef;

  .banner {
    height: 300px;
    background-image: url('@/assets/drink/drink_banner.png');
  }

  //.img-group {
  //  width: 1200px;
  //  margin-left: 120px;
  //  box-sizing: border-box;
  //
  //  .top {
  //    height: 160px;
  //
  //    img:not(:first-of-type) {
  //      margin-left: 20px;
  //    }
  //  }
  //
  //  .under {
  //    margin-top: 20px;
  //    height: 160px;
  //
  //    img:not(:first-of-type) {
  //      margin-left: 20px;
  //    }
  //  }
  //}
  .img-group {
    margin-left: 141px;
    margin-bottom: 110px;
    img {
      width: 579px;
      height: 385px;
    }

    img:not(:first-of-type) {
      margin-left: 43px;
    }
  }

  .text-group {
    margin-top: 48px;
    margin-left: 217px;
    padding-bottom: 48px;
    font-size: 36px;
    color: #85be55;

    span:not(:first-of-type) {
      margin-left: 226.5px;
    }
  }

  .title {
    width: 500px;
    padding-left: 117px;
    height: 50px;
    color: black;
    font-size: 36px;
    box-sizing: border-box;
    background: #fcffef;
    line-height: 50px;

    .small-check {
      width: 5px;
      height: 40px;
      background-color: #90c463;
      display: inline-block;
      vertical-align: bottom;
    }

    span {
      margin-left: 15px;
      height: 50px;
      color: #87bf58;
    }
  }

  .brand-concept {
    width: 1200px;
    margin-left: 120px;
    word-wrap: break-word;
    text-align: left;
    padding-bottom: 32px;
    font-size: 20px;
  }

  .brand-image {
    margin-left: 120px;
    padding-bottom: 79px;

    img {
      width: 380px;
      height: 230px;
    }

    img:not(:first-of-type) {
      margin-left: 30px;
    }
  }

  .management-concept {
    position: relative;
    //padding-bottom: 32px;
    //box-sizing: border-box;
    background: #fcffef;

    .text {
      width: 580px;
      float: left;
      word-wrap: break-word;
      font-size: 20px;
      margin-left: 120px;
      text-align: left;
    }

    .management-img {
      float: right;
      width: 574px;
      height: 350px;
      margin-right: 120px;
      position: relative;
      top: -50px;
    }

    .clear {
      clear: both;
    }
  }
}
</style>
